@layout("/common/container.html", {"title" : "个人中心"}){
<div class="kt-portlet" kt-portlet="true">
    <#portlet:head title="个人中心" icon="la la-bars"/>
    <div class="kt-portlet__body">
        <form class="kt-form">
        <div class="row">
            <div class="col-md-6 col-12">
                <div class="form-group row">
                    <label class="col-4 col-form-label">
                        选择部门：
                    </label>
                    <div class="col-8">
                        <div class="input-group">
                            <input type="hidden" id="departId" name="departId" class="form-control" readonly>
                            <input type="text" id="departName" class="form-control" readonly>
                            <div class="input-group-append">
                                <button class="btn btn-default" type="button" onclick="showModal()">选择</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>
<!--begin::Modal-->
<div class="modal fade" id="m_modal_5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">选择部门</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="kt-form kt-padding-b-15">
                    <div class="input-group">
                        <input type="text" id="depart-title" class="form-control" placeholder="请输入关键字">
                        <div class="input-group-append">
                            <button id="search-depart-btn" class="btn btn-secondary" type="button">搜索</button>
                        </div>
                    </div>
                </form>

                <div id="depart-tree"></div>

                <div id="search-depart" class="kt-hide">
                    <div class="tree"></div>
                    <button type="button" class="btn btn-metal btn-xs back-btn kt-margin-t-5"><i
                            class="la la-undo"></i> 返回
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-info">确定</button>
            </div>
        </div>
    </div>
</div>
<!--end::Modal-->
<script>
    function showModal(){
        $('#m_modal_5').modal();
        $('.back-btn').click();
        KTTool.getTree('#depart-tree').refresh();
    }
    function reloadTree() {
        // KTTool.getTree('#depart-tree').refresh();

    }
    var initDepartTree = function () {
        $('#depart-tree').jstree({
            types: {
                default: {
                    icon: 'la la-bars'
                }
            },
            plugins: ['types'],
            core: {
                check_callback: true,
                data: {
                    url: function (node) {
                        var url = basePath + '/auth/sys/depart/select/data';
                        if ('#' !== node.id) {
                            url += '?pId=' + node.id;
                        }
                        return url;
                    }
                }
            }
        }).on('activate_node.jstree', function (e, data) {
            // activateNode(data.node)
        });
    };
    /**
     * 搜索
     */
    var search = function () {
        var permissionsTitle = $('#depart-title').val();
        if (KTUtil.isNotBlank(permissionsTitle)) {
            $('#depart-tree').addClass('m--hide');
            $('#search-depart').removeClass('m--hide');
            KTUtil.ajax({
                type: 'get',
                wait: '#search-depart',
                data: {
                    title: permissionsTitle
                },
                url: basePath + '/auth/sys/depart/search',
                success: function (res) {
                    var $tree = $('#search-depart').find('.tree');
                    if ($tree.jstree(true)) {
                        $tree.jstree(true).destroy();
                    }
                    $tree.jstree({
                        types: {
                            default: {
                                icon: 'la la-bars'
                            }
                        },
                        plugins: ['types'],
                        core: {
                            data: res.data
                        }
                    }).on('activate_node.jstree', function (e, data) {
                        // activateNode(data.node);
                    });
                }
            });
        } else {
            KTTool.warnTip(KTTool.commonTips.fail, '请输入关键字搜索');
        }
    };
    $(document).ready(function () {
        initDepartTree();
        $('#search-depart-btn').click(search);
        $('.back-btn').click(function () {
            $('#search-depart').addClass('m--hide');
            $('#depart-tree').removeClass('m--hide');
            $('#depart-title').val('');
        });
    });
</script>
@}